<template>
    <d2-container>
        <el-button-group>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="add">添加</el-button>
            <el-button type="primary" icon="el-icon-edit" size="small" :disabled="currentId == 0" @click="edit">编辑
            </el-button>
            <el-button type="primary" icon="el-icon-delete" size="small" :disabled="currentId == 0" @click="del">删除
            </el-button>
            <el-button type="primary" icon="el-icon-aim" :disabled="currentId == 0" size="small" @click="cancel">取消
            </el-button>
        </el-button-group>
        <el-popover placement="top-start" title="温馨提示" width="400" trigger="hover">
            <li>城市编码：仅市才有编码，其他同级别省区无编码，请填写“[]”即可</li>
            <li>区域编码：请根据全国区域编码填写真实编码</li>
            <el-button slot="reference" size="small" icon="el-icon-info" style="float:right">操作提示</el-button>
        </el-popover>
        <el-row :gutter="20">
            <el-col :span="8" style="margin-top:15px;">
                <el-card shadow="hover" v-loading="areaLoading">
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom:10px">
                    </el-input>
                    <el-tree ref="tree" class="filter-tree" node-key="id" highlight-current
                        :expand-on-click-node="false" :data="areaList" render-after-expand
                        :filter-node-method="filterNode" :props="defaultProps" @node-click="getAreaData"
                        :default-expanded-keys="expandedKeys">
                    </el-tree>
                </el-card>
            </el-col>
            <el-col :span="16" style="margin-top:15px;">
                <el-card shadow="hover">
                    <el-form label-position="right" label-width="80px" :model="areaform" ref="areaform">
                        <el-form-item label="父级节点" prop="parentPkArea"
                            :rules="[{ required: true, message: '父级节点不能为空', trigger: 'blur'}]">
                            <el-input v-model="areaform.parentPkArea" :disabled="true" placeholder="父级节点"></el-input>
                        </el-form-item>
                        <el-form-item label="区域名称" prop="name"
                            :rules="[{ required: true, message: '名称不能为空', trigger: 'blur'}]">
                            <el-input v-model="areaform.name" :disabled="!formEdit" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label="区域级别" prop="level"
                            :rules="[{ required: true, message: '区域级别不能为空', trigger: 'blur'}]">
                            <ec-dict-select dictType="area_level" v-model="areaform.level" :disabled="!formEdit"
                                placeholder="请输入区域级别"></ec-dict-select>
                        </el-form-item>
                        <el-form-item label="中心坐标" prop="center">
                            <el-input v-model="areaform.center" :disabled="!formEdit" placeholder="请输入中心坐标"></el-input>
                        </el-form-item>
                        <el-form-item label="区域编码" prop="adCode">
                            <el-input v-model="areaform.adCode" :disabled="!formEdit" placeholder="请输入区域编码"></el-input>
                        </el-form-item>
                        <el-form-item label="城市编码" prop="cityCode">
                            <el-input v-model="areaform.cityCode" :disabled="!formEdit" placeholder="请输入城市编码">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="是否启用" prop="cityCode">
                            <el-select class="filter-item" v-model="areaform.status" :disabled="!formEdit"
                                placeholder="请选择是否启用" style="width:100%">
                                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="formEdit">
                            <el-button type="primary" @click="submit">提交</el-button>
                            <el-button @click="reset">清空</el-button>
                            <el-button v-if="areaform.pkArea&&areaform.type==2" @click="openInterfaceDialog">关联接口
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

            </el-col>
        </el-row>
    </d2-container>
</template>

<script>
    import * as areaService from "@/api/bdms/area";
    // import * as dictService from "@/api/sys/dict";
    export default {
        name: "AreaPage",
        components: {},
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        data() {
            return {
                formEdit: false,
                areaLoading: false,
                currentId: 0,
                areaList: [],
                filterText: '',
                defaultProps: {
                    label: "title"
                },
                expandedKeys: [],
                areaform: {
                    parentPkArea: 0,
                    pkArea: 0,
                    adCode: "",
                    center: "",
                    cityCode: "",
                    level: "",
                    name: "",
                    version: ""
                },
                searchPermission: {
                    value: ""
                },
                statusOptions: [{
                    value: "0",
                    label: "未启用"
                }, {
                    value: "1",
                    label: "启用"
                }],
                canAdd: true
            };
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.title.indexOf(value) !== -1;
            },
            getAreaTree() {
                this.areaLoading = true;
                areaService.getAreaTree().then(data => {
                    if (data != null) {
                        this.areaList = data;
                        this.expandedKeys.push(data[0].id)
                    }
                    this.areaLoading = false;
                });
            },
            getAreaData(res) {
                let pkArea = res.id;
                areaService.getArea(pkArea).then(data => {
                    this.areaform = {
                        adCode: data.adCode,
                        center: data.center,
                        cityCode: data.cityCode,
                        pkArea: data.pkArea,
                        level: data.level,
                        name: data.name,
                        parentPkArea: data.parentPkArea,
                        status: data.status,
                        version: data.version
                    };
                    this.currentId = pkArea;
                });
            },
            add() {
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择上级区域！');
                    return
                }
                this.areaform = {
                    pkArea: 0,
                    parentPkArea: this.currentId,
                };
                this.formEdit = true;
            },
            edit() {
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择修改区域！');
                    return
                }
                this.formEdit = true;
            },
            del() {
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择删除区域！');
                    return
                }
                this.$confirm("确认删除？", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "删除",
                    cancelButtonText: "取消"
                }).then(() => {
                    areaService.delArea(this.currentId).then(() => {
                        this.currentId = 0;
                        this.getAreaTree();
                    });
                });
            },
            cancel() {
                this.formEdit = false;
                this.currentId = 0;
                this.areaform = {};
            },
            submit() {
                if (this.areaform.pkArea > 0) {
                    areaService.updateArea(this.areaform).then(() => {
                        this.getAreaTree()
                    });
                } else {
                    areaService.saveArea(this.areaform).then(() => {
                        this.getAreaTree()
                    });
                }
                this.reset();

            },
            reset() {
                this.areaform = {
                    pkArea: this.currentId,
                    parentPkArea: 0,
                    adCode: "",
                    center: "",
                    cityCode: "",
                    level: "",
                    name: "",
                    version: ""
                };
            },
            // loadNode(node, resolve) {
            //     let pkArea = node.data.pkArea;
            //     if (node.level === 0) {
            //         // areaService.getAreaQueryList({
            //         //     parentPkArea: 0,
            //         //     level: 0
            //         // }).then(data => {
            //         //     return resolve(data.data);
            //         // })
            //     }
            //     if (node.level > 0) {
            //         // areaService.getAreaQueryList({
            //         //     parentPkArea: pkArea
            //         // }).then(data => {
            //         //     return resolve(data.data);
            //         // })
            //     };

            // }
        },
        created() {
            this.getAreaTree();
        },

    };
</script>